<template>
  <div class="item">
        <Header title="云管家"/>
        <img class="login" src="@/assets/Login-bg@3x.png" >
        <div class="login-box">
            <h2>登录</h2>
            <form>
                <div class="login-text">
                    <img class="small" src="@/assets/usersmall.png" alt="">
                    <input type="text" v-model="username" placeholder="请输入账号">
                </div>
                <div class="login-text">
                    <img class="small" src="@/assets/lock.png" alt="">
                    <input type="password" v-model="password" placeholder="请输入密码">
                </div>
            </form>
            <div class="btn" @click="login">登录</div>
            <div class="login-bottom">
                <p class="bom-left">忘记密码</p>
                <p class="bom-right" @click="register">立即注册</p>
            </div>
        </div>
    </div>
</template>

<script>
//import timer from '../timer'
export default {
  name: 'login',
  data () {
    return {
      username:null,
      password:null,
      time:null
    }
  },
  methods:{
    login(){
      var that = this;
      var md5 = that.$md5(that.password);
      //console.log(that.timer.globalData());
      var appkey = that.timer.globalData();
      var time = that.timer.gettime();

      that.$http.post('login',{
        sign:that.$md5(`${appkey}mobile=${that.username}timestamp=${time}`),
        timestamp:time,
        mobile:that.username,
        password:md5
      }).then( (res) => {
        console.log(res)
      }).catch(function(res) {
        console.log(res);
    });

    },
    register(){
        var that = this;
        that.$router.push('/register')
    }
  }
}
</script>


<style scoped>
      /* Login-bg@3x.png */
.item{
        position: relative;
    }
    .login{
        width: 100%;
        height: 280px;
    }
    .login-box{
        width: 90%;
        box-shadow: 0px 2.5px  2.5px 2.5px rgb(195, 195,195);
        background: white;
        margin-left: 5%;
        height: 300px;
        border-radius: 15px;
        position: absolute;
        margin-top: -40px;
    }
    .login-box h2{
        text-align: center;
        margin:20px 0; 
        color: #128BE5;
    }
     .login-box form{
         margin: 0px 3%;
     }
    .login-text{
        display: flex;
        height: 45px;
        margin: 25px auto 0 auto;
        background: #EEEEEE;
        border-radius: 50px;
    }
    .small{
        width: 30px;
        height: 30px;
        margin: 8px 15px 5px 15px;
        float: left;
    }
    .login-text input{
        flex: 1;
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px; 
        background: #EEEEEE;
        border: none;
        font-size: 16px;
        outline: none;
    }
    .btn{
        /* width:88%; */
        background: #128BE5;
        margin:20px 3%;
        color: white;
        height: 40px;
        border-radius: 50px;
        text-align: center;
        line-height: 40px;

    }
    .login-bottom{
        width: 83%;
        margin: 3px auto 0 auto;
    }
    .bom-left{
         box-sizing: border-box;
         float: left;
         color: #00A2DF;
    }
    .bom-right{
         text-align: right;
         color: #00A2DF;
    }
</style>
